<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
Created by IntelliJ IDEA.
User: 陪你度过漫长岁月
Date: 2022/8/5
Time: 11:42
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>用户管理</title>
    <link rel="stylesheet" href="../../component/pear/css/pear.css"/>
</head>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<body class="pear-container">
<form method="post">
    <div class="layui-card">
        <div class="layui-card-body">
            <form class="layui-form">
                <div class="layui-form-item">
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label">米ID</label>
                        <div class="layui-input-inline">
                            <input type="text" name="miid" id="miid" placeholder="请输入米ID" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label">性别</label>
                        <div class="layui-input-inline">
                            <input type="text" name="sex" id="sex" placeholder="请输入性别" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <label class="layui-form-label">邮箱</label>
                        <div class="layui-input-inline">
                            <input type="text" name="email" id="email" placeholder="请输入邮箱" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-form-item layui-inline">
                        <button class="pear-btn pear-btn-primary pear-btn-md" id="search" style="width: 50px">
                            查询
                        </button>
                        <button type="reset" class="pear-btn pear-btn-md">
                            <i class="layui-icon layui-icon-refresh"></i>
                            重置
                        </button>
                    </div>
                </div>
            </form>
        </div>
    </div>
    <div class="layui-card">
        <div class="layui-card-body">
            <table id="user-table" lay-filter="user-table"></table>
        </div>
    </div>

    <script type="text/html" id="user-toolbar">
        <button class="pear-btn pear-btn-primary pear-btn-md" lay-event="add">
            <i class="layui-icon layui-icon-add-1"></i>
            新增
        </button>
        <button class="pear-btn pear-btn-danger pear-btn-md" lay-event="batchRemove">
            <i class="layui-icon layui-icon-delete"></i>
            删除
        </button>
    </script>

    <script type="text/html" id="user-bar">
        <button class="pear-btn pear-btn-primary pear-btn-sm" lay-event="edit"><i
                class="layui-icon layui-icon-edit"></i></button>
        <button class="pear-btn pear-btn-danger pear-btn-sm" lay-event="remove"><i
                class="layui-icon layui-icon-delete"></i></button>
    </script>
</form>
<script src="../../component/layui/layui.js"></script>
<script src="../../component/pear/pear.js"></script>
<div align="center">
    <%--    layui 禁用按钮属性 layui-btn-disabled--%>
</div>
<script>

    layui.use(['table', 'form', 'jquery', 'common'], function () {
        let table = layui.table;
        // let form = layui.form;
        let $ = layui.jquery;
        let common = layui.common;

        let MODULE_PATH = "operate/";

        let cols = [[
            {type: 'checkbox', title: 'ID'}
            , {field: 'id', title: '编号', width: 65, sort: true}
            , {field: 'miid', title: '米id', width: 100, sort: false}
            , {field: 'username', title: '用户昵称', width: 80, sort: false, edit: 'text'}
            , {field: 'sex', title: '性别', width: 70, sort: true, edit: 'text'}
            , {field: 'phone', title: '手机号', width: 120, sort: false}
            , {field: 'email', title: '邮箱', width: 150, sort: false}
            , {field: 'password', title: '密码', width: 120, sort: false}
            , {field: 'creationtime', title: '创建时间', width: 150, sort: true}
            , {field: 'miname', title: '米昵称', width: 120, sort: false, edit: 'text'}
            , {field: 'manager', title: '用户身份', width: 100, sort: true}
            , {field: 'address', title: '地址', width: 120, sort: false, edit: 'text'}
        ]]

        //查询
        $('#search').on('click', function () {
            table.render({
                elem: '#user-table',
                url: '${pageContext.request.contextPath}/JsonServlet?miid=' + $("#miid").val() + "&sex=" + $("#sex").val() + "&email=" + $("#email").val(),
                page: true,
                cols: cols,
                skin: 'line',
                async:true,
                headers:{
                    token:localStorage.token
                },
                request:{
                    pageName:'pageNo',
                    limitName:'pageSize',
                },
                toolbar: '#user-toolbar',
                defaultToolbar: [{
                    title: '刷新',
                    layEvent: 'refresh',
                    icon: 'layui-icon-refresh',
                }, 'filter', 'print', 'exports']
            });
            return false
        })

        //异步获取用户列表界面
        table.render({
            elem: '#user-table',
            url: '${pageContext.request.contextPath}/JsonServlet?miid=' + $("#miid").val() + "&sex=" + $("#sex").val() + "&email=" + $("#email").val(),
            page: true,
            cols: cols,
            skin: 'line',
            async:true,
            headers:{
              token:localStorage.token
            },
            request:{
                pageName:'pageNo',
                limitName:'pageSize',
            },
            toolbar: '#user-toolbar',
            defaultToolbar: [{
                title: '刷新',
                layEvent: 'refresh',
                icon: 'layui-icon-refresh',
            }, 'filter', 'print', 'exports']
        });

        table.on('tool(user-table)', function (obj) {
            if (obj.event === 'remove') {
                window.remove(obj);
            } else if (obj.event === 'edit') {
                window.edit(obj);
            }
        });

        table.on('toolbar(user-table)', function (obj) {
            if (obj.event === 'add') {
                window.add();
            } else if (obj.event === 'refresh') {
                window.refresh();
            } else if (obj.event === 'batchRemove') {
                window.batchRemove(obj);
            }
        });

        window.add = function () {
            layer.open({
                type: 2,
                title: "新增",
                closeBtn: 1,
                area: [common.isModile() ? '100%' : '800px', common.isModile() ? '100%' : '800px'], scrollbar: false,
                skin: 'layui-layer-rim my-layer1',
                shadeClose: false,
                content: MODULE_PATH + 'add.jsp',
                offset: '10px',
                end: function () {
                }
            });
        }

        window.edit = function (obj) {
            layer.open({
                type: 2,
                title: '修改',
                shade: 0.1,
                area: ['500px', '400px'],
                content: MODULE_PATH + 'edit.jsp'
            });
        }

        //删除用户
        window.batchRemove = function (obj) {
            //获取当前选中列的id
            var id = common.checkField(obj, 'id');
            if (id === "") {
                layer.msg("未选中数据", {
                    icon: 3,
                    time: 1000
                });
                return false;
            }

            layer.confirm('确定要删除这些用户', {
                icon: 3,
                title: '提示'
            }, function (index) {
                layer.close(index);
                let loading = layer.load();
                $.ajax({
                    url: "${pageContext.request.contextPath}/UserDeleteServlet",
                    data: {id: id},
                    dataType: 'text',
                    type: 'post',
                    success: function (result) {
                        table.render({
                            elem: '#user-table',
                            url: '${pageContext.request.contextPath}/JsonServlet?miid=' + $("#miid").val() + "&sex=" + $("#sex").val() + "&email=" + $("#email").val(),
                            page: true,
                            cols: cols,
                            skin: 'line',
                            async:true,
                            headers:{
                                token:localStorage.token
                            },
                            request:{
                                pageName:'pageNo',
                                limitName:'pageSize',
                            },
                            toolbar: '#user-toolbar',
                            defaultToolbar: [{
                                title: '刷新',
                                layEvent: 'refresh',
                                icon: 'layui-icon-refresh',
                            }, 'filter', 'print', 'exports']
                        });
                        layer.close(loading);
                        layer.msg("删除成功!", {
                            time: 20000,
                            btn: ['确定']
                        })
                    }
                })
            });


        }
        window.refresh = function (param) {
            table.reload('user-table');
        }
    })
</script>
</body>
</html>
